<div id="root">
    
    <qf-nav-bar
    left-arrow=""
    @click-left="clickLeftFn"
    @click-right="clickRightFn"
    title="用户创建"></qf-nav-bar>

    <h1>表单组件</h1>
    <qf-table @submit="submitFn"></qf-table>


    <h1>按钮组件</h1>
    <qf-button type="primary" content="主要按钮"></qf-button>
    <qf-button type="info" content="信息按钮"></qf-button>
    <qf-button type="default" content="默认按钮"></qf-button>
    <qf-button type="warning" content="警告按钮"></qf-button>
    <qf-button type="danger" content="危险按钮"></qf-button>

    <h1>loading1组件</h1>
    <qfloading1 :state="loading1State"></qfloading1>
    <button @click="loading1State = true">开启loading</button>
    <button @click="loading1State = false">隐藏loading</button>
    <h1>loading2组件</h1>
    <qf-loading2 :state.sync="loading2State"></qf-loading2>
    <button @click="loading2State=true">显示loading</button>

    <h1>dialog对话框组件</h1>
    <qf-dialog :visible.sync="dialogState" title="用户创建" content="<input type='text'/>"></qf-dialog>
    <button @click="dialogState=true">显示对话框</button>

    <h1>分页组件</h1>
    <qf-page :total="10" :page-size="2" @click-page="changePageFn"></qf-page>

     <h1>table组件</h1>
     <qf-table1 :columns="usersColumns" :data="usersData"></qf-table1>
     <br/>
     <qf-table1 :columns="goodsColumns" :data="goodsData"></qf-table1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script src="./qfui.js"></script>
<script>
const vm = new Vue({
    el: "#root",
    data: {
        loading1State:false,
        loading2State:false,
        dialogState:false,
        usersColumns:[
            {title:"编号",key:"id"},
            {title:"姓名",key:"uname"},
            {title:"cs",key:"id"},
            {title:"性别",key:"sex"},
            {title:"性别2",key:"sex2",render:(row)=>`<b style="color:blue">${row.sex2===1?"男":"女"}</b>`},
        ],
        usersData:[
            {id:1,uname:'wpl',sex:"男",sex2:1},
            {id:2,uname:'wwr',sex:"男",sex2:1},
            {id:3,uname:'bnm',sex:"女",sex2:2},
        ],

        goodsColumns:[
            {title:"编号",key:"id"},
            {title:"商品名称",key:"title"},
            {title:"价格",key:"price"}
        ],
        goodsData:[
         {id:1, title:"商品1",price:1.11},
         {id:2, title:"商品2",price:2.22},
         {id:3, title:"商品3",price:3.33},
         {id:4, title:"商品4",price:4.44},
        ],
    },
    methods:{
        changePageFn(pageNum){
          console.log('你点击分页了:',pageNum);
        },
        clickLeftFn(){
            alert('clickLeftFn')
        },
        clickRightFn(){
            alert('clickRightFn')
        },

        submitFn(formData){
            alert('用户请求接口')
        }
    }
})
</script>